<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" th:content="${GLOBAL.BLOG_AUTHOR}">
    <title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE" th:text="${GLOBAL.BLOG_TITLE}"></title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css(v=3.3.7)}">
    <link rel="stylesheet" th:href="@{/vendor/aos/aos.css(v=2.3.4)}">
    <link rel="stylesheet" th:href="@{/css/style.css(v=1.0.6)}">
    <link rel="stylesheet" th:href="@{/vendor/highslide/highslide.css(v=5.0.0)}">
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.min.css(v=4.7.0)}">
    <link rel="stylesheet" th:href="@{/vendor/live2d/css/live2d.css}"/>
    <script th:src="@{/vendor/jquery/jquery.min.js(v=3.2.1)}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js(v=3.3.7)}"></script>
    <script th:src="@{/vendor/aos/aos.js(v=2.3.4)}"></script>
    <script th:src="@{/vendor/highslide/highslide-full.min.js(v=5.0.0)}"></script>
    <th:block th:unless="${#strings.isEmpty(GLOBAL.BLOG_HEAD)}">
        [(${GLOBAL.BLOG_HEAD})]
    </th:block>
</head>
<body>
<!-- 背景轮播图功能 -->
<section class="hidden-xs">
    <ul class="cb-slideshow">
        <script th:inline="javascript">
            var backgroundList =/*[[${GLOBAL.BACKGROUND_LIST}]]*/ "";
            backgroundList = JSON.parse(backgroundList);
            var duration = backgroundList.length * 6;
            for (var i in backgroundList) {
                document.write("<li style='list-style-type:none;'><span style='background-image: url(" + backgroundList[i] + ");animation:imageAnimation " + duration + "s linear infinite " + i * 6 + "s;-webkit-animation:imageAnimation " + duration + "s linear infinite " + i * 6 + "s;'></span></li>");
            }
        </script>
    </ul>
</section>
<!-- 欧尼酱功能, 谁用谁知道 -->
<div class="gal-menu gal-dropdown">
    <div class="circle" id="gal">
        <div class="ring">
            <a th:href="${GLOBAL.BLOG_URL}" class="menuItem" style="left: 50%; top: 15%;">首页</a>
            <a href="/category" class="menuItem" style="left: 80.3109%; top: 67.5%;">分类</a>
            <a href="/about.html" class="menuItem" style="left: 50%; top: 85%;">关于我</a>
            <a href="/tag" class="menuItem" style="left: 19.6891%; top: 67.5%;">标签</a>
            <th:block th:if="${page}">
                <a th:href="${page.hasPrevious()}?('./'+${page.current - 1}):'#'" class="menuItem"
                   style="left: 19.6891%; top: 32.5%;">上一页</a>
                <a th:href="${page.hasNext()}?('./'+${page.current + 1}):'#'" class="menuItem"
                   style="left: 80.3109%; top: 32.5%;">下一页</a>
            </th:block>
            <th:block th:unless="${page}">
                <a th:href="${nextArticle}?('/'+${nextArticle.url}+'.html'):'#'" class="menuItem"
                   style="left: 80.3109%; top: 32.5%;">下一篇</a>
                <a th:href="${previousArticle}?('/'+${previousArticle.url}+'.html'):'#'" class="menuItem"
                   style="left: 19.6891%; top: 32.5%;">上一篇</a>
            </th:block>
        </div>
        <audio id="audio" src="/images/onj.mp3"></audio>
    </div>
</div>
<header layout:replace="~{common/header}"></header>
<div id="gal-body">
    <div class="container">
        <div class="row">
            <div class="col-md-8 gal-right" id="mainstay" layout:fragment="content"></div>
            <aside th:replace="~{common/sidebar}"></aside>
        </div>
    </div>
</div>
<footer layout:replace="~{common/footer}"></footer>
<!-- 回到顶端 -->
<div id="gal-gotop">
    <i class="fa fa-angle-up"></i>
</div>
<div layout:replace="~{common/live2d}"></div>
<script th:src="@{/js/activate-power-mode.js(v=1.0.0)}"></script>
<script>
    // 配置highslide
    hs.graphicsDir = '/vendor/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
        interval: 5000,
        repeat: true,
        useControls: true,
        fixedControls: "fit",
        overlayOptions: {
            opacity: 0.75,
            position: "bottom center",
            hideOnMouseOut: true
        }
    })

    // 初始化aos
    AOS.init({
        duration: 1000,
        delay: 0,
        easing: 'ease-out-back'
    });

</script>
<script>
    POWERMODE.colorful = 'true';    // make power mode colorful
    POWERMODE.shake = 'true';       // turn off shake
    document.body.addEventListener('input', POWERMODE);
</script>
<script th:src="@{/js/blog.js(v=1.0.2)}"></script>
<script th:src="@{/js/onj.js(v=1.0.0)}"></script>
<th:block th:unless="${#strings.isEmpty(GLOBAL.BLOG_SCRIPT)}">
    [(${GLOBAL.BLOG_SCRIPT})]
</th:block>
</body>
</html>